---
import { listChangelog } from '../queries/changelog';
import { DateTime } from 'luxon';
import AstroIcon from './AstroIcon.astro';

const changelogs = await listChangelog({ limit: 10 });
---

<div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
  <div class='container max-w-[650px]!'>
    <p class='text-2xl font-bold sm:text-5xl'>
      <img
        src='/img/gifs/rocket.gif'
        alt='Rocket'
        class='mr-2 hidden h-12 w-12 sm:inline'
      />
      Actively Maintained
    </p>
    <p
      class='mt-1 mb-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'
    >
      We are always improving our content, adding new resources and adding
      features to enhance your learning experience.
    </p>

    <div class='relative mt-2 text-left sm:mt-8'>
      <div
        class='absolute inset-y-0 left-[120px] hidden w-px translate-x-[5.75px] bg-gray-300 sm:block'
      >
      </div>
      <ul class='relative flex flex-col gap-4 py-4'>
        {
          changelogs.map((changelog) => {
            const formattedDate = DateTime.fromISO(
              changelog.createdAt,
            ).toFormat('dd LLL, yyyy');
            return (
              <li class='relative'>
                <a
                  href={`/changelog#${changelog._id}`}
                  class='flex flex-col items-start sm:flex-row sm:items-center'
                >
                  <span class='shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
                    {formattedDate}
                  </span>
                  <span class='hidden h-3 w-3 shrink-0 rounded-full bg-gray-300 sm:block' />
                  <span class='text-base font-medium text-balance text-gray-900 sm:pl-8'>
                    {changelog.title}
                  </span>
                </a>
              </li>
            );
          })
        }
      </ul>
    </div>
    <div
      class='mt-2 flex flex-col gap-2 sm:mt-8 sm:flex-row sm:items-center sm:justify-center'
    >
      <a
        href='/changelog'
        class='inline-block rounded-lg border border-black bg-black px-4 py-2 text-sm text-white transition-colors hover:bg-gray-700 sm:rounded-full sm:px-6 sm:text-base'
      >
        View Full Changelog
      </a>
      <button
        data-guest-required
        data-popup='login-popup'
        class='flex flex-row items-center gap-2 rounded-lg border border-black bg-white px-4 py-2 text-sm text-black transition-all hover:bg-black hover:text-white sm:rounded-full sm:pr-5 sm:pl-4 sm:text-base'
      >
        <AstroIcon icon='bell' class='h-5 w-5' />
        Subscribe for Notifications
      </button>
    </div>
  </div>
</div>
